<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/tt.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>

</head>
<body>
<div class="top">
    <span class="top-left">下载APP</span>
    <span class="top-left"> 北京         晴天</span>
    <span class="top-right">更多产品</span>
</div>

<div class="container">

    <div class="left">
        <a>
            <img src="img/logo.png"><br/>
        </a>

        <ul>
            <li>
                <a class="channel-item active" href="#">
                    <span>
                        推荐
                    </span>
                </a>
            </li>

            <li><a class="channel-item" href="#">
                <span>
                    视频
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    热点
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    直播
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    图片
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    娱乐
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    游戏
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    体育
                </span>
            </a></li>

        </ul>

    </div>
    <div class="center">
        <ul class="news_list">
            <li v-for="news in newsList">
                <div class="title-box">
                    <a href="#" class="link">
                         {{news.title}}
                        <hr>
                    </a>
                </div>
            </li>
        </ul>

		<div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination">
                    <!--elementui分页条-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-sizes="[10, 15, 20, 25]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/pagination.min.js"></script>

<script>

    let vue=new Vue({
        el:".container",
        data:{
            newsList:[],
            //定义分页条需要的变量
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            }
        },
        methods:{
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize=val;
                pageQuery();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagination.currentPage=val;
                pageQuery();
            }
        }
    });

    //页面加载完成函数
    $(function (){
        //发送异步请求，默认获取第1页10条数据
        pageQuery();
    })

    function pageQuery(){
        $.ajax({
            url:"newsServlet",
            data: {currentPage:vue.pagination.currentPage,pageSize:vue.pagination.pageSize},
            type:"get",
            dataType:"json",
            success:function (pageInfo){
                //处理响应结果
                //1 展示新闻条目------------------------------------------
                vue.newsList=pageInfo.list;

                //2 展示分页条-------------------------------------------
                //设置总条数
                vue.pagination.total=pageInfo.total;

                //3 让窗体的滚动条滚动到最上方
                window.scrollTo(0,0);
            }
        });
    }
</script>

</html>